<template>
  <div>
    <el-container>
      <el-aside width="200px"></el-aside>
      <el-main>
        <el-card>
          <el-row><span>Please enter your challenge title<span class="red-asterisk"> *</span></span></el-row>
          <el-row class="content">
            <el-input v-model="form.title" placeholder="请输入内容"></el-input>
          </el-row>

          <el-row><span>Tags<span class="red-asterisk"> *</span></span></el-row>
          <el-row class="content">
            <el-input v-model="form.tags" placeholder=""></el-input>
          </el-row>

          <el-row><span>Please enter a description<span class="red-asterisk"> *</span></span></el-row>
          <el-row class="content">
            <div ref="quillEditor" class="quill-editor"></div> <!-- Quill 编辑器 -->
          </el-row>
          <el-row class="word-count">{{ wordCount }}/{{ maxWordCount }}</el-row>

          <el-row><span></span></el-row>

          <el-row>
            <div style="height: 1px; width: 100%;margin-bottom: 10px; background-color: rgb(128,128,128)"></div>
          </el-row>

          <el-row>
            <el-col :span="8">
              <el-button style="width: 100%;background-color: #1f2d3d; color: white; font-weight: bold">SAVE DRAFT
              </el-button>
            </el-col>
            <el-col :span="8" :offset="8">
              <el-button style="width: 100%; background-color: #ffbd00; color: black; font-weight: bold">SUBMIT
              </el-button>
            </el-col>
          </el-row>
        </el-card>
      </el-main>
      <el-aside width="200px"></el-aside>
    </el-container>
  </div>
</template>

<script>
import Quill from 'quill';
import 'quill/dist/quill.snow.css';  // 主题样式，可以选择其他主题

export default {
  data() {
    return {
      wordCount: 0,
      maxWordCount: 2000,
      form: {
        title: '',
        details: '',
        fileList: []
      }
    };
  },
  mounted() {
    // 在 mounted 生命周期钩子中初始化 Quill 编辑器
    this.initializeQuill();
  },
  methods: {
    initializeQuill() {
      const editor = this.$refs.quillEditor;
      // 初始化 Quill 编辑器
      this.quill = new Quill(editor, {
        theme: 'snow',  // 使用 snow 主题
        placeholder: '   请输入描述...',  // 默认显示的提示文字
        modules: {
          toolbar: [
            [{'header': '1'}, {'header': '2'}, {'font': []}],
            [{'list': 'ordered'}, {'list': 'bullet'}],
            ['bold', 'italic', 'underline'],
            [{'align': []}],
            ['link'],
            ['image'],
          ]
        },
      });

      this.quill.on('text-change', () => {
        this.updateWordCount();
      });
    },
    updateWordCount() {
      const text = this.quill.getText().trim(); // 获取 Quill 编辑器内容
      this.wordCount = text.length > this.maxWordCount ? this.maxWordCount : text.length; // 限制最大字数
    },
    clearEditor() {
      this.quill.setText(''); // 清空编辑器内容
      this.updateWordCount(); // 更新字数统计
    },
    getContent() {
      // 获取编辑器的内容
      console.log(this.quill.getText());  // 获取富文本的 HTML 内容
    }
  },
}
</script>


<style scoped>
.el-row {
  margin-bottom: 10px;
}

.content {
  margin-bottom: 70px;
}

.red-asterisk {
  color: red;
}

.quill-editor {
  height: 200px; /* 设置编辑器的高度 */
  border: 1px solid #ccc;
  border-radius: 4px;
  padding: 10px;
}

.word-count {
  text-align: right;
  margin-top: -70px;
  margin-bottom: 50px;
}
</style>